import React from 'react';
import { CloseOutlined, HomeOutlined, LeftOutlined, MenuOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import TabPanel from '../components/TabPanel';

const DeviceDetailPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  // 从URL获取手机ID
  const getDeviceId = () => {
    const searchParams = new URLSearchParams(location.search);
    return searchParams.get('id');
  };
  
  const handleClose = () => {
    // 清除URL中的id参数
    navigate('/device/list');
  };
  
  // 计算手机画面的尺寸，保持1080:1920的比例
  const calculatePhoneSize = () => {
    // 基于视窗高度的70%来计算手机高度
    const phoneHeight = window.innerHeight * 0.7;
    // 根据1080:1920的比例计算宽度
    const phoneWidth = (phoneHeight * 1080) / 1920;
    
    return {
      width: phoneWidth,
      height: phoneHeight
    };
  };
  
  const phoneSize = calculatePhoneSize();
  
  // 手机按键操作处理
  const handleBackButton = () => {
    console.log('Back button pressed');
  };
  
  const handleHomeButton = () => {
    console.log('Home button pressed');
  };
  
  const handleRecentsButton = () => {
    console.log('Recents button pressed');
  };
  
  return (
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      backgroundColor: 'rgba(0, 0, 0, 0.7)',
      zIndex: 1000,
      display: 'flex',
      flexDirection: 'column',
      padding: '24px'
    }}>
      <div style={{ display: 'flex', justifyContent: 'flex-start' }}>
        <CloseOutlined 
          onClick={handleClose} 
          style={{ 
            color: '#fff', 
            fontSize: '24px', 
            cursor: 'pointer',
            marginBottom: '20px'
          }} 
        />
      </div>
      
      <div style={{ 
        display: 'flex', 
        flexDirection: 'row', 
        flex: 1,
        gap: '20px' // 增加左右两侧的间距
      }}>
        {/* 左侧手机画面区域 */}
        <div style={{ 
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          padding: '20px',
          width: '40%' // 限制左侧宽度
        }}>
          <div style={{
            width: phoneSize.width,
            height: phoneSize.height,
            backgroundColor: '#000',
            borderRadius: '20px',
            overflow: 'hidden',
            boxShadow: '0 0 20px rgba(0, 0, 0, 0.5)',
            position: 'relative'
          }}>
            {/* 手机屏幕内容区域 */}
            <div style={{
              width: '100%',
              height: '100%',
              backgroundColor: '#000',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              overflow: 'hidden'
            }}>
              {/* 空白手机屏幕 */}
            </div>
            
            {/* 手机导航栏按钮 */}
            <div style={{
              position: 'absolute',
              bottom: 0,
              left: 0,
              right: 0,
              height: '50px',
              backgroundColor: 'rgba(0, 0, 0, 0.8)',
              display: 'flex',
              justifyContent: 'space-around',
              alignItems: 'center',
              borderBottomLeftRadius: '20px',
              borderBottomRightRadius: '20px',
            }}>
              {/* Back 按钮 */}
              <div 
                onClick={handleBackButton}
                style={{
                  width: '50px',
                  height: '50px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  cursor: 'pointer',
                }}
              >
                <LeftOutlined style={{ color: '#fff', fontSize: '24px' }} />
              </div>
              
              {/* Home 按钮 */}
              <div 
                onClick={handleHomeButton}
                style={{
                  width: '50px',
                  height: '50px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  cursor: 'pointer',
                }}
              >
                <HomeOutlined style={{ color: '#fff', fontSize: '24px' }} />
              </div>
              
              {/* Recents 按钮 */}
              <div 
                onClick={handleRecentsButton}
                style={{
                  width: '50px',
                  height: '50px',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  cursor: 'pointer',
                }}
              >
                <MenuOutlined style={{ color: '#fff', fontSize: '24px' }} />
              </div>
            </div>
          </div>
        </div>
        
        {/* 右侧内容区域 - 标签页面板 */}
        <div style={{ 
          flex: 1,
          padding: '20px',
          display: 'flex',
          flexDirection: 'column'
        }}>
          <div style={{ marginBottom: '10px' }}>
            <h2 style={{ 
              color: '#fff',
              margin: 0,
              fontSize: '20px'
            }}>
              手机控制面板
            </h2>
            <p style={{ color: '#aaa', margin: '5px 0 0 0', fontSize: '14px' }}>
              手机ID: {getDeviceId() || 'Unknown'}
            </p>
          </div>
          <div style={{ flex: 1 }}>
            <TabPanel />
          </div>
        </div>
      </div>
    </div>
  );
};

export default DeviceDetailPage; 